<template>
    <div class="product">

        <s-header></s-header>

        <side-bar></side-bar>

        <s-title :name="'所有产品'"></s-title>

        <div class="box">

            <div class="search">
                <label for="search_input">产品名称</label>
                <input type="text"  id="search_input">

                <button class="inquire_btn">查询</button>
                <button class="reset_btn">重置</button>
            </div>

            <div class="op">
                <button class="add">添加一件产品</button>
                <button class="refresh">刷新产品列表</button>
            </div>

            <div class="detail">
                <div class="total">
                    <i class="iconfont icon-sousuo"></i>
                    <span>查看合计</span>
                    <span style="margin-left: 10px;">产品总数:</span>
                    <span class="total_num">26</span>
                    <span>件</span>
                </div>

                <div class="head">
                    <ul>
                        <li>产品名称</li>
                        <li>价格</li>
                        <li>创建日期</li>
                        <li>上架状态</li>
                        <li>操作</li>
                    </ul>
                </div>

                <div class="body">
                    <ul>
                        <li>title</li>
                        <li>price</li>
                        <li>date</li>
                        <li>onsale</li>
                        <li>删除</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</template>
  
  


<script setup>
import sHeader from '../components/SimpleHeader.vue'
import sideBar from '../components/SideBar.vue'
import sTitle from '../components/SimpleTitle.vue'
</script>




<style lang="less" scoped>
.product{
    .box{
        position: fixed;
        top: 130px;
        left: 300px;
        margin-top: 40px;
        margin-left:40px;

        .search{
            label{
                margin-right: 20px;
            }
            input{
                outline: none;      /* 去除轮廓线，当元素获得焦点时通常会出现 */
            }

            .inquire_btn{
                margin-left: 20px;
                color: #fff;
                background-color: #ff7874;
                border: none;
                border-radius: 3px;
                width: 50px;

                &:hover{
                    cursor: pointer;
                }
            }

            .reset_btn{
                margin-left: 20px;
                color: #9f9b9b;
                background-color: #fff;
                border: 1px solid #979696;
                border-radius: 3px;
                width: 50px;

                &:hover{
                    cursor: pointer;
                }
            }
        }

        .op{
            margin-top: 20px;
            .add{
                margin-right: 20px;
                width: 100px;
                background-color: #018901; /* 浅绿色 */
                color: #fff;
                border: none;
                border-radius: 3px;

                &:hover{
                    cursor: pointer;
                }
            }
            .refresh{
                width: 100px;
                background-color: #66d4f9; /* 浅蓝色 */
                color: #fff;
                border: none;
                border-radius: 3px;
                &:hover{
                    cursor: pointer;
                }
            }
        }

        .detail{
            margin-top: 20px;
            // height: 50px;
            .total{
                width: 1040px;
                height: 36px;
                line-height: 36px;
                background-color: #fef6f4;
                border: 1px solid #f9eceb;

                .iconfont{
                    color: #ff7874;
                    margin:0 10px;
                }

                .total_num{
                    margin: 0 5px;
                    color: #ff7874;
                }
            }

            .head{
                margin-top: 20px;
                background:#f5f6fb;
                height: 36px;
                line-height: 36px;
                ul{
                    display: flex;
                    li{
                        width: 200px;
                        font-weight: 700;
                        list-style: none;
                    }
                }
                
            }

            .body{
                display: flex;
                height: 36px;
                line-height: 36px;
                border-bottom: 1px solid #d3d4d5;
                ul{
                    display: flex;

                    li{
                        width: 200px;
                        font-weight: 700;
                        list-style: none;

                        &:nth-child(4){
                            color: #018901;
                        }
                        
                        &:last-child{
                            color: red;
                            cursor: pointer;
                        }
                    }
                }
            }
            
        }
    }
}
</style>
